<script setup lang="ts">
import { ref, computed } from 'vue'
import {
  NInput,
  NButton,
  NSpace,
  NTag,
  NRadioGroup,
  NRadio,
  NResult,
  NDivider,
  NIcon,
} from 'naive-ui'
import { Add24Regular } from '@vicons/fluent'

const names = ref<string[]>([])
const currentName = ref('')
const selectedName = ref<string | null>(null)
const isRunning = ref(false)
const speed = ref<'normal' | 'fast'>('normal')
let timer: number | null = null

const speedInterval = computed(() => {
  return speed.value === 'normal' ? 200 : 50
})

const handleAdd = () => {
  if (currentName.value.trim()) {
    names.value.push(currentName.value.trim())
    currentName.value = ''
  }
}

const handleDelete = (index: number) => {
  names.value.splice(index, 1)
  if (names.value.length === 0) {
    stop()
  }
}

const start = () => {
  if (names.value.length === 0) return
  isRunning.value = true
  roll()
}

const stop = () => {
  if (timer) {
    window.clearTimeout(timer)
    timer = null
  }
  isRunning.value = false
}

const roll = () => {
  if (!isRunning.value) return

  const randomIndex = Math.floor(Math.random() * names.value.length)
  selectedName.value = names.value[randomIndex]

  timer = window.setTimeout(roll, speedInterval.value)
}

const handleToggle = () => {
  if (isRunning.value) {
    stop()
  } else {
    start()
  }
}
</script>

<template>
  <div class="drink-time">
    <NSpace vertical>
      <!-- 输入区域 -->
      <div class="input-area">
        <NInput v-model:value="currentName" placeholder="请输入参与者姓名" @keyup.enter="handleAdd">
          <template #suffix>
            <NButton text @click="handleAdd">
              <NIcon><Add24Regular /></NIcon>
            </NButton>
          </template>
        </NInput>
      </div>

      <!-- 名单展示区域 -->
      <div class="name-list" v-if="names.length > 0">
        <NSpace>
          <NTag v-for="(name, index) in names" :key="index" closable @close="handleDelete(index)">
            {{ name }}
          </NTag>
        </NSpace>
      </div>

      <NDivider />

      <!-- 控制区域 -->
      <div class="control-area">
        <NSpace vertical>
          <NRadioGroup v-model:value="speed">
            <NRadio value="normal">正常速度</NRadio>
            <NRadio value="fast">快速</NRadio>
          </NRadioGroup>

          <NButton
            :type="isRunning ? 'warning' : 'primary'"
            :disabled="names.length === 0"
            @click="handleToggle"
          >
            {{ isRunning ? '停止' : '开始' }}
          </NButton>
        </NSpace>
      </div>

      <!-- 结果展示区域 -->
      <div class="result-area" v-if="selectedName">
        <NResult
          :status="isRunning ? 'info' : 'success'"
          :title="selectedName"
          :description="isRunning ? '抽取中...' : '恭喜！'"
        />
      </div>
    </NSpace>
  </div>
</template>

<style scoped>
.drink-time {
  max-width: 500px;
  margin: 0 auto;
  padding: 1rem;
}

.input-area {
  width: 100%;
}

.name-list {
  min-height: 40px;
}

.control-area {
  display: flex;
  justify-content: center;
}

.result-area {
  margin-top: 1rem;
}
</style>
